<template>
    <div id="app">
        <transition name="slide-left">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    methods: {},
    created() { },
    components: {}
};
</script>

<style lang="less">
.slide-left-enter {
    opacity: 0;
    transform: rotateY(180deg);
}

.slide-left-enter-active {
    transition: all 600ms;
}

.slide-left-leave-to {
    opacity: 0;
    transform: rotateY(-180deg);
}

body {
    background-image: url(./assets/common/bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>
